<template>
	<div class="">

		<div class="zzc" v-if="showzzc" @click="close"></div>
		<div class="container">
			<div class="title">巡检计划</div>

			<div class="search_box" style="flex-wrap: wrap;">

				<input type="text" autocomplete="off" v-model="name" class="form-control search_inp"
					style="margin-bottom: 0;" placeholder="输入巡检计划">

				<el-date-picker prefix-icon='none' style="width: 150px;margin-left: 10px;" v-model="createStartDate"
					type="date" @change="changedate(1)" value-format="timestamp" placeholder="开始日期">
				</el-date-picker>
				<el-date-picker prefix-icon='none' style="width: 150px;margin-left: 10px;" v-model="createEndDate"
					type="date" @change="changedate(2)" value-format="timestamp" placeholder="结束日期">
				</el-date-picker>

				<div class="input-cont" style="margin-left:10px;width: 150px;">
					<input type="text" class="form-control" readonly v-model="uname" placeholder="巡检负责人">

					<img src="@assets/images/close.png" class="clears" alt="" v-if="uname"
						@click="uname = '';suserid=''">
					<span class="iconfont icon-list" data-toggle="modal" data-target="#keshi"
						@click="utype='search';openuseralert()"></span>
				</div>


				<div class="sea_btn sear_btns" @click="search()">
					<img src="@assets/images/search.png" alt="">
					查询
				</div>


				<div class="add_btn sear_btns" @click="openadd" v-if="$permissions.indexOf(248)  != -1">
					<img src="@assets/images/add.png" alt="">
					新增
				</div>
				<div class="del_btn sear_btns" @click="delopen(0)" v-if="$permissions.indexOf(254)  != -1">
					<img src="@assets/images/del.png" alt="">
					删除
				</div>
			</div>
			<div class="table-responsive">
				<h2 class="tcent" v-if="list.length ==0">暂时没有数据</h2>
				<table class="table table-hover" v-else>
					<tr>
						<th style="width: 50px;">
							<input type="checkbox" autocomplete="off" @change="changeall" v-model="choseall"
								name="adepart" id="adepart"><label for="adepart"></label>
						</th>
						<th>计划名称</th>
						<th>计划负责人</th>
						<th>创建时间</th>
						<th>周期</th>
						<th class="tcent">操作
						</th>
					</tr>
					<tr v-for="item,index in list">
						<td style="width: 50px;">
							<input type="checkbox" v-model="item.chosesf" @change="chosechange" name="adepart"
								:id="'adepart'+item.id"><label :for="'adepart'+item.id"></label>
						</td>
						<td>{{item.name}}</td>
						<td>{{item.resRealName}}</td>
						<td>{{item.createDate}}</td>
						<td>{{item.period}}</td>
						<td class="tcent" style="width: 200px;">
							<a href="javascript:;" class="btn-green btns" @click="edit(index)">编辑</a>
							<a href="javascript:;" class="btn-gray btns" @click="delopen(item.id)">删除</a>

						</td>
					</tr>

				</table>

				<div class="page_box">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="page" :page-sizes="[10, 30, 60, 100]" :page-size="limit"
						layout="total, sizes, prev, pager, next, jumper" :total="inglen">
					</el-pagination>
				</div>

			</div>


		</div>
		<!--新增-->
		<div :class="showadd?'modal in fade':'modal fade'" tabindex="-1" role="dialog" id="keshi"
			:style="showadd?'display: block;z-index:199;':'z-index:199;'">
			<div class="cent w600" style="justify-content: center;width: 800px !important;">
				<div class="modal-dialog" role="document" style="width: 100%;height: 670px;">
					<div class="modal-content">
						<div class="modal-header tit">
							<em></em>{{id?'编辑巡检计划':'新建巡检计划'}}
							<div class="right" @click="showadd=false;">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"
									style="line-height: normal;"><span class="iconfont icon-cha"
										aria-hidden="true"></span> </button>
							</div>
						</div>
						<!--表单-->
						<div class="modal-body h100 search-cont" style="padding: 15px 27px;height: 550px;">
							<div class="sublist">
								<div class="subli">
									<div class="subli_left">
										<label class="subl"><em class="red">*</em>
											巡检计划名称</label>
										<div class="input-cont">
											<input type="text" class="form-control" v-model="info.name"
												placeholder="输入巡检计划名称">
										</div>
									</div>

								</div>
								<div class="subli">
									<div class="subli_left">
										<label class="subl"><em class="red">*</em>
											巡检周期</label>
										<div class="input-cont">
											<el-select v-model="xjzq" placeholder="巡检周期" @change="changexj">
												<el-option v-for="item in options" :key="item.id" :label="item.name"
													:value="item.id">
												</el-option>
											</el-select>
											<div v-if="xjzq == 1">
												<div class="days dat" style="position: relative;">
													<!-- <div class="dayli" v-for="(item,index) in 31"
														@click="selectday(item)"
														:style="info.day.indexOf(item) == -1?'color:#666':'color:#4286f5'">
														{{item}}
													</div> -->
													<div style="position: absolute;left: -80px;top: 0;">
														<el-checkbox @change="selectday" :value="dayf">全选</el-checkbox>
													</div>
													<el-checkbox-group v-model="day">
														<el-checkbox v-for="item,index in days" :label="item.id"
															:value="item.id">{{item.name}}</el-checkbox>
													</el-checkbox-group>

												</div>
											</div>
											<div v-if="xjzq == 2">
												<div class="days" style="position: relative;">
													<div style="position: absolute;left: -90px;top: 0;">
														<el-checkbox @change="selectweek" :value="weekf">全选
														</el-checkbox>
													</div>

													<el-checkbox-group v-model="week">
														<el-checkbox v-for="item,index in weeks" :label="item.id"
															:value="item.id">{{item.name}}</el-checkbox>
													</el-checkbox-group>


												</div>
											</div>
											<div v-if="xjzq == 3">
												<div class="days month">
													<el-checkbox-group v-model="info.month">
														<el-checkbox v-for="item in month" :label="item.id"
															:value="item.id">{{item.name}}</el-checkbox>
													</el-checkbox-group>
												</div>
											</div>

										</div>
									</div>
									<!-- <vcrontab @hide="showCron=false" @fill="crontabFill" :expression="expression"></vcrontab> -->

								</div>

								<div class="subli">
									<div class="subli_left adpl">
										<label class="subl"><em class="red">*</em>
											巡检执行时间</label>
										<div class="input-cont">
											<el-time-picker prefix-icon='none' value-format="HH:mm:ss"
												v-model="info.time" placeholder="请选择巡检执行时间">
											</el-time-picker>
										</div>
									</div>
								</div>
								<div class="subli">
									<div class="subli_left adpl">
										<label class="subl"><em class="red">*</em>
											计划开始日期</label>
										<div class="input-cont">
											<el-date-picker prefix-icon='none' v-model="info.beginDate"
												@change="changedate(1)" type="datetime" placeholder="选择日期">
											</el-date-picker>
										</div>
									</div>
									<div class="subli_left adpl">
										<label class="subl"><em class="red">*</em>
											计划结束日期</label>
										<div class="input-cont">
											<el-date-picker prefix-icon='none' v-model="info.endDate"
												@change="changedate(1)" type="datetime" placeholder="选择日期">
											</el-date-picker>
										</div>
									</div>
									<div class="input-cont">
										<el-checkbox style="margin-left: 20px;" v-model="info.isForever">永久</el-checkbox>
									</div>
								</div>
								<div class="subli">
									<div class="subli_left">
										<label class="subl"><em class="red">*</em>巡检成员</label>
										<div class="input-cont">
											<input type="text" class="form-control" v-model="cnames" readonly
												placeholder="请选择巡检成员" :title="cnames">
											<span class="iconfont icon-list"
												@click="utype='xmz';openuseralert2()"></span>
										</div>
									</div>
								</div>

								<div class="stitle"><em class="red">*</em>请选择地点</div>
								<div class="stitle_btns">
									<el-button type="primary" plain round @click="addaddress">添加</el-button>
									<el-button type="primary" plain round @click="deladdress">删除</el-button>
								</div>
								<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark"
									style="width: 100%" @selection-change="handleSelectionChange">
									<el-table-column type="selection" width="55">
									</el-table-column>
									<el-table-column label="巡检点编号" prop="code">
									</el-table-column>
									<el-table-column prop="name" label="巡检点名称">
									</el-table-column>
									<el-table-column prop="address" label="地址">
									</el-table-column>
								</el-table>
							</div>
						</div>
						<div class="modal-footer tcent">
							<button class="btn btn-primary" @click="showData">确定</button>
							<button class="btn btn-info close_eng" @click="showadd=false">关闭</button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<el-dialog title="选择巡检地点" :visible.sync="dialogVisible" width="800px" :modal="false" style="margin-left: 250px;"
			class="plac">
			<el-tabs v-model="activeName" type="card">
				<el-tab-pane label="巡检单元" name="first">
					<el-table ref="multipleTable3" :data="xjaddress" tooltip-effect="dark" style="width: 100%"
						@selection-change="handleSelectionChange2" :row-key="getRowKeys">
						<el-table-column type="selection" width="55" :reserve-selection="true">
						</el-table-column>
						<el-table-column label="巡检点编号" prop="code">
						</el-table-column>
						<el-table-column prop="name" label="巡检点名称">
						</el-table-column>
						<el-table-column prop="address" label="地址">
						</el-table-column>
					</el-table>
					<div class="page_box">
						<el-pagination @current-change="handleCurrentChange3" :current-page="page3" :page-size="limit3"
							layout="total, prev, pager, next" :total="inglen3">
						</el-pagination>
					</div>
				</el-tab-pane>
				<el-tab-pane label="巡检资产" name="second">
					<el-table ref="multipleTable4" :data="xjzclist" tooltip-effect="dark" style="width: 100%"
						@selection-change="handleSelectionChange3" :row-key="getRowKeys">
						<el-table-column type="selection" width="55" :reserve-selection="true">
						</el-table-column>
						<el-table-column label="巡检点编号" prop="zcCode">
						</el-table-column>
						<el-table-column prop="zcName" label="名称">
						</el-table-column>
						<el-table-column prop="area" label="地址">
						</el-table-column>
					</el-table>
					<div class="page_box">
						<el-pagination @current-change="handleCurrentChange4" :current-page="page4" :page-size="limit4"
							layout="total, prev, pager, next" :total="inglen4">
						</el-pagination>
					</div>
				</el-tab-pane>
			</el-tabs>


			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="sure">确 定</el-button>
			</span>
		</el-dialog>

		<div class="alzzc" v-if="delalert">
			<div class="del_alert">
				<div class="modal-header tit" style="text-align: left;">
					<em></em>信息
					<div class="right" @click="delalert=false">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"
							style="line-height: normal;"><span class="iconfont icon-cha" aria-hidden="true"></span>
						</button>
					</div>
				</div>
				<div class="alert_info">确认要删除选中的这<span>{{delnum}}</span>条数据吗？</div>
				<div class="alert_btns">
					<div class="alert_sure" @click="del">确认</div>
					<div class="alert_close" @click="delalert=false">取消</div>
				</div>
			</div>
		</div>
		<!--报修人-->
		<div :class="user_alert?'modal in fade':'modal fade'" role="dialog"
			:style="user_alert?' align-items: center;justify-content: center;display: flex;z-index:200;':'z-index:200'"
			id="engineer">

			<div class="cent w700" style="height: 865px;max-width: 955px;max-height:calc(100vh - 50px)">

				<div class="modal-dialog" role="document">
					<div class="modal-content" style="overflow: visible;">
						<div class="modal-header tit">
							<em></em>选择用户
							<div class="right" @click="closeusertalert">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
										class="iconfont icon-cha" aria-hidden="true"></span> </button>
							</div>
						</div>
						<!--表单-->
						<div class="modal-body h100"
							style="overflow-x: hidden;overflow-y:scroll;height:760px;max-height:calc(100vh - 150px)">

							<div class="left">
								<div class="zTreeDemoBackground">
									<ul id="treeDemo4" class="ztree" @select="choseroom_user"></ul>
								</div>
							</div>
							<div class="right" style="overflow: visible;">
								<div class="search">
									<!-- <form> -->
									<div class="form-group" style="display: flex;padding-right: 0;">
										<input class="form-control" autocomplete="off"
											@keydown.enter="page2=1;word_users=word_user;getalluserlist()"
											v-model="word_user" placeholder="输入关键字">
										<div style="margin-left: 10px;" class="btn btn-success"
											@click="page2=1;word_users=word_user;getalluserlist()">
											<span class="iconfont icon-chaxun"
												style="line-height: 34px;vertical-align: baseline;"></span>
										</div>
									</div>
									<!-- </form> -->
								</div>

								<div class="enr_alert_scorll">
									<div style="height: 552px;">
										<h2 class="tcent" v-if="user_all.length ==0">暂时没有数据</h2>
										<table class="table table-hover smallTab" v-else>
											<tr>
												<th></th>
												<th>账号</th>
												<th>姓名</th>
												<th>电话</th>
											</tr>
											<tr v-for="item,index in user_all">
												<td>
													<input type="radio" v-model="userid" :value="item.id"
														@change="changechose(item.id,item.realName,item.phoneNo)"
														name="chose2" :id="'c'+item.id"><label
														:for="'c'+item.id"></label>
												</td>
												<td>{{item.userName}}</td>
												<td>{{item.realName}}</td>
												<td>{{item.phoneNo}}</td>
											</tr>
										</table>
									</div>
									<div class="Spage" style="margin: 20px 0;">
										<el-pagination @current-change="handleCurrentChange2" :current-page="page2"
											style="display: flex;justify-content: center;" :pager-count="5"
											:page-size="10" :page-count="num2" layout="prev, pager, next">
										</el-pagination>
									</div>


									<div class="tcent" style="margin-bottom: 30px;">
										<button class="btn btn-primary" @click="user_alert = false">确定</button>&emsp;
										<button class="btn btn-default" @click="closeusertalert">关闭</button>
									</div>
								</div>


							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!--选择添加工程师-->
		<div :class="alert_show?'modal in fade':'modal fade'" role="dialog"
			:style="alert_show?' align-items: center;justify-content: center;display: flex;z-index:202':''"
			id="engineer">

			<div class="cent w700" style="height: 865px;max-width: 955px;max-height:calc(100vh - 50px)">

				<div class="modal-dialog" role="document">
					<div class="modal-content" style="overflow: visible;">

						<div class="modal-header tit">
							<em></em>选择用户
							<div class="right" @click="closealert">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
										class="iconfont icon-cha" aria-hidden="true"></span> </button>
							</div>
						</div>
						<!--表单-->
						<div class="modal-body h100"
							style="overflow-x: hidden;overflow-y:scroll;height:760px;max-height:calc(100vh - 150px)">
							<div class="left">
								<div class="zTreeDemoBackground">
									<ul id="treeDemo2" class="ztree" @select="choseroom"></ul>
								</div>
							</div>
							<div class="right" style="overflow: visible;">
								<div class="search">
									<!-- <form> -->
									<div class="form-group" style="display: flex;padding-right: 0;">
										<input class="form-control" autocomplete="off"
											@keydown.enter="page2=1;word_users=word_user;getalluserlist()"
											v-model="word_user" placeholder="输入关键字">
										<div style="margin-left: 10px;" class="btn btn-success"
											@click="page2=1;word_users=word_user;getalluserlist()">
											<span class="iconfont icon-chaxun"
												style="line-height: 34px;vertical-align: baseline;"></span>
										</div>
									</div>
									<!-- </form> -->
								</div>
								<div class="txt-black">为您找到{{inglen2}}位 <span class="txt-blue">用户</span> </div>

								<div class="enr_alert_scorll">
									<div style="height: 552px;overflow-y: auto;">
										<h2 class="tcent" v-if="cuserlist.length ==0">暂时没有数据</h2>
										<table class="table table-hover smallTab" v-else>
											<tr>
												<th><input type="checkbox" @change="changeall2" v-model="choseall2"
														name="all2" id="cuser"><label for="cuser"></label></th>
												<th>账号</th>
												<th>姓名</th>
												<th>电话</th>
											</tr>
											<tr v-for="item,index in cuserlist">
												<td>
													<input type="checkbox" v-model="item.chosesf"
														@change="chosechange2(item)" name="chose2"
														:id="'cuser'+item.id"><label :for="'cuser'+item.id"></label>
												</td>
												<td>{{item.userName }}</td>
												<td>{{item.realName}}</td>
												<td>{{item.phoneNo}}</td>
											</tr>
										</table>
									</div>
									<div class="Spage" style="margin: 20px 0;">
										<el-pagination @current-change="handleCurrentChange2" :current-page="page2"
											style="display: flex;justify-content: center;" :pager-count="5"
											:page-size="10" layout="prev, pager, next" :total="inglen2">
										</el-pagination>
									</div>

									<div class="tcent" style="margin-bottom: 30px;">
										<button class="btn btn-primary" @click="cusers">确定</button>&emsp;
										<button class="btn btn-default" @click="closealert()">关闭</button>
									</div>
								</div>


							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="loading-content" v-if="showloading">
			<div class="loading-spinner">
				<svg viewBox="25 25 50 50" class="circular">
					<circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
				</svg>
			</div>
			<div class="loading-text">加载中...</div>
		</div>
	</div>
</template>

<script type="text/babel">
	import $ from 'jquery'

// import vcrontab from "vcrontab";
// import vcrontab from "../../components/vcorn.vue";
	export default {
		name: "",
		data() {
			return {
				activeName:"first",
				userid:"",
				tableData:[],
				days:[
					{name:'1日',id:1},
					{name:'2日',id:2},
					{name:'3日',id:3},
					{name:'4日',id:4},
					{name:'5日',id:5},
					{name:'6日',id:6},
					{name:'7日',id:7},
					{name:'8日',id:8},
					{name:'9日',id:9},
					{name:'10日',id:10},
					{name:'11日',id:11},
					{name:'12日',id:12},
					{name:'13日',id:13},
					{name:'14日',id:14},
					{name:'15日',id:15},
					{name:'16日',id:16},
					{name:'17日',id:17},
					{name:'18日',id:18},
					{name:'19日',id:19},
					{name:'20日',id:20},
					{name:'21日',id:21},
					{name:'22日',id:22},
					{name:'23日',id:23},
					{name:'24日',id:24},
					{name:'25日',id:25},
					{name:'26日',id:26},
					{name:'27日',id:27},
					{name:'28日',id:28},
					{name:'29日',id:29},
					{name:'30日',id:30},
					{name:'31日',id:31},
				],
				month:[
					{name:'一月',id:1},
					{name:'二月',id:2},
					{name:'三月',id:3},
					{name:'四月',id:4},
					{name:'五月',id:5},
					{name:'六月',id:6},
					{name:'七月',id:7},
					{name:'八月',id:8},
					{name:'九月',id:9},
					{name:'十月',id:10},
					{name:'十一月',id:11},
					{name:'十二月',id:12},
				],
				weeks:[
					{name:'周一',id:2},
					{name:'周二',id:3},
					{name:'周三',id:4},
					{name:'周四',id:5},
					{name:'周五',id:6},
					{name:'周六',id:7},
					{name:'周日',id:1}
				],
				day:[],
				week:[],
				xjzclist:[],
				deladdids:[],
				addids:[],
				multipleSelection2:[],
				multipleSelection3:[],
				xjaddress:[],
				cnames:[],
				cuserlist:[],
				dialogVisible:false,
				alert_show:false,
				choseall2:false,
				info:{
					day:[],
					month:[],
					week:[],
				},
				xjzq: '',
				options: [{
						name: '按日',
						id: 1
					},
					{
						name: '按周',
						id: 2
					},
					// {
					// 	name: '按月',
					// 	id: 3
					// },
				],
				
				cron:"",
				page2: 1,
				page4: 1,
				page3: 1,
				page: 1,
				user_all: [],
				list: [],
				inglen: 0,
				inglen2: 0,
				inglen3: 0,
				inglen4: 0,
				limit: 10,
				limit2: 10,
				limit3: 10,
				limit4: 10,
				num2: 1,
				num: 1,
				uname:"",
				unames:"",
				word_users:"",
				word_user:"",
				showzzc: false,
				showloading: false,
				showadd: false,
				delnum:'',
				departId:'',
				dayf:false,
				user_alert:false,
				delalert:false,
				choseall:false,
				utype:'',
				names:'',
				name:"",
				ppname:"",
				remark:"",
				createStartDate:"",
				createStartDates:"",
				createEndDate:"",
				createEndDates:"",
				 expression: "",
				id:"",
				setting_u: {
					treeId: 'id',
					data: {
						key: {
							name: 'name'
						}
					},
					callback: {
						onClick: this.choseroom_user
					}
				},
				setting: {
					treeId: 'id',
					data: {
						key: {
							name: 'name'
						}
					},
					callback: {
						onClick: this.choseroom
					}
				},
				treeClickCount4: 0,
				treeClickCount: 0,
				zNodes: [],
				zNodes_u: [],
				user_c: [],
				cname: [],
				ztree_obj_u: {},
				ids:""
			}
		},
		// components: {vcrontab },
		mounted() {
			this.getlist();
			this.getaddress();
			this.getxjzc();
			// this.$refs.innerVueCron.show()
		},
		beforeRouteEnter(to, from, next) { //路由导航钩子，通过页面路由标记是否需要清空页面数据重新加载
		    to.meta['fromPath'] = from.path;
			to.meta['needFresh'] = false;
		    
		    next();
		  },
		activated(){
			
		},
		methods: {
			changexj(){
				this.info.day = []
				this.info.week = []
				this.info.month = []
			},
			sure(){
				for (var i = 0; i < this.multipleSelection3.length; i++) {
					this.multipleSelection3[i].name =this.multipleSelection3[i].zcName
					this.multipleSelection3[i].address =this.multipleSelection3[i].area
					this.multipleSelection3[i].code =this.multipleSelection3[i].zcCode
				}
				this.tableData=this.multipleSelection2.concat(this.multipleSelection3);
				this.dialogVisible = false
			},
			getRowKeys(row) {
			    return row.id;
			},
			 handleSelectionChange(val) {
			    this.multipleSelection = val;
				this.deladdids=[]
				for (var i = 0; i < val.length; i++) {
					this.deladdids.push(val[i].id)
				}
			},
			deladdress(){
				let arr1 = []
				for (var i = 0; i < this.tableData.length; i++) {
					arr1.push(this.tableData[i].id)
				}
				let arr2 = this.deladdids
				// 取两个数组的差值
				let arr3 = arr1.filter(function(v) {
					return !arr2.includes(v)
				})
				let arr4 = []
				for (var i = 0; i < this.tableData.length; i++) {
					if (arr3.indexOf(this.tableData[i].id) != -1) {
						arr4.push(this.tableData[i])
					}
				}
				this.tableData = arr4
				
			},
			handleSelectionChange2(val) {
				this.multipleSelection2 = val;
				this.addids=[]
				for (var i = 0; i < val.length; i++) {
					this.addids.push(val[i].id)
				}
			},
			handleSelectionChange3(val) {
				this.multipleSelection3 = val;
				// this.addids=[]
				// for (var i = 0; i < val.length; i++) {
				// 	this.addids.push(val[i].id)
				// }
			},
			addaddress(){
				this.dialogVisible = true
			},
			chosechange2(e){
				// console.log(this.cname)
				// console.log(e.chosesf)
				if(e.chosesf){
					this.user_c.push(e.id)
					this.cname.push(e.realName)
					
					this.user_c = this.user_c.filter((item, index, array) => {
					  return array.indexOf(item) === index
					})
					}else{
							console.log('xmfx==='+this.user_c.indexOf(e.id))
							this.user_c.splice(this.user_c.indexOf(e.id),1)
							this.cname.splice(this.cname.indexOf(e.realName),1)
					}
						
				console.log(this.cname)
				// return
				var a = 0
				for (var i = 0; i < this.cuserlist.length; i++) {
					// console.log(this.cuserlist[i])
					if(this.cuserlist[i].chosesf == true){
						a++
					}
					
				}
				if(a == this.cuserlist.length){
					this.choseall2=true
				}else{
					this.choseall2=false
				}
				this.$forceUpdate()
			},
			changeall2(){
				if(this.choseall2){
					for (var i = 0; i < this.cuserlist.length; i++) {
						this.cuserlist[i].chosesf = true
						
							this.user_c.push(this.cuserlist[i].id)
							this.cname.push(this.cuserlist[i].realName)
							this.user_c = this.user_c.filter((item, index, array) => {
							  return array.indexOf(item) === index
							})
							this.cname = this.cname.filter((item, index, array) => {
							  return array.indexOf(item) === index
							})
						
					}
				}else{
					for (var i = 0; i < this.cuserlist.length; i++) {
						
							this.user_c.splice(this.user_c.indexOf(this.cuserlist[i].id),1)
							this.cname.splice(this.cname.indexOf(this.cuserlist[i].realName),1)
						
						this.cuserlist[i].chosesf = false
					}
					this.$forceUpdate()
				}
			},
			cusers(){
				this.cnames = this.cname.join(',')
				this.alert_show=false
				this.word_user = ''
				this.word_users = ''
				this.deptId = ''
				
				this.did = ''
				this.ztree_obj_u.cancelSelectedNode();
				this.getalluserlist()
			},
			openuseralert2(){
				this.getrooms()
				this.page2 = 1
				this.getalluserlist()
				this.alert_show = true
			},
			selectweek(){
				if(this.week.length == 7){
					this.weekf = false
					this.week=[]
					this.info.week=[]
				}else{
					this.weekf = true
					this.week=[1,2,3,4,5,6,7]
					this.info.week=[1,2,3,4,5,6,7]
				}
			},
			selectday(i) {
				if(this.day.length == 31){
					this.dayf = false
					this.day=[]
					this.info.day=[]
				}else{
					this.dayf = true
					this.day=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
					this.info.day=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
				}
				// if (this.info.day.indexOf(i) == -1) {
				// 	// console.log(this.day)
				// 	this.info.day.push(i)
				// } else {
				// 	this.info.day.splice(this.info.day.indexOf(i), 1)
				// }
				// this.day = this.day.join(',')
			},
			
			changechose(id,name,tel){
				// if(this.utype == 'search'){
					this.uname = name
					this.suserid = id
				// }else if(this.utype == 'add'){
				// 	this.username = name
				// 	this.info.xjPersonId = id
				// }
			},
			// 科室树状图选择
			choseroom_user(data, node, treeNode) {
				this.treeClickCount4++;
				if (this.treeClickCount4 >= 2) {
					return;
				}
				this.timer = window.setTimeout(() => {
					if (this.treeClickCount4 == 1) {
						this.treeClickCount4 = 0;
						console.log('单击事件,可在此处理对应逻辑')
							
								this.did = treeNode.id
								console.log(this.did)
							this.page2=1
							this.getalluserlist()
						
					} else if (this.treeClickCount4 > 1) {
						this.treeClickCount4 = 0;
						
						this.ztree_obj_u.cancelSelectedNode();
						console.log('双击事件,可在此处理对应逻辑')
					}
				}, 300);
			},
			closeusertalert(){
				this.user_alert = false
				this.username = ''
				this.$forceUpdate()
				this.word_user = ''
				this.did = ''
				this.userid = ''
				this.ztree_obj_u.cancelSelectedNode();
				this.getrooms()
				this.getalluserlist()
			},
			handleCurrentChange2(val) {
				this.page2 = val
				this.getalluserlist()
			},
			handleCurrentChange3(val) {
				this.page3 = val
				this.getaddress()
			},
			handleCurrentChange4(val) {
				this.page4 = val
				this.getxjzc()
			},
			openuseralert(){
				this.page2 = 1
				this.username = ''
				this.word_user = ''
				this.did = ''
				this.userid = ''
				this.getrooms()
				this.getalluserlist()
				this.user_alert = true
			},
			// 获取弹窗里的用户
			getalluserlist() {
				this.choseall2 = false
				
				var id = this.did?this.did:''
				var that = this
				var url = encodeURI(this.$url + '/sys/user/list?page='+this.page2+'&limit='+this.limit2+'&deptId='+id+'&userName='+this.word_users)
				this.$http.get(url)
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.user_all = response.data.data.records
						that.cuserlist = response.data.data.records
						for (var i = 0; i < that.user_all.length; i++) {
							that.user_all[i].id = window.atob(that.user_all[i].id)
							that.cuserlist[i].id = that.user_all[i].id
						}
						// if(that.utype == 'addsp'){
							var a = 0
							for (var i = 0; i < that.cuserlist.length; i++) {
								console.log(that.user_c.indexOf(that.cuserlist[i].id))
								if(that.user_c.indexOf(that.cuserlist[i].id) > -1){
									a++
									that.cuserlist[i].chosesf = true
								}else{
									that.cuserlist[i].chosesf = false
								}
							}
							
						// }else if(that.utype == 'addcs'){
						// 	var a = 0
						// 	for (var i = 0; i < that.cuserlist.length; i++) {
						// 		if(that.user_c2.indexOf(that.cuserlist[i].id) > -1){
						// 			a++
						// 			that.cuserlist[i].chosesf = true
						// 		}else{
						// 			that.cuserlist[i].chosesf = false
						// 		}
						// 	}
						// }
						if(a == that.cuserlist.length){
							that.choseall2=true
						}else{
							that.choseall2=false
						}
						console.log(response.data)
						that.inglen2 = response.data.data.total
						if (that.inglen2 > that.limit2) {
							that.num2 = response.data.data.pages
						} else {
							that.num2 = 1
						}
				that.ztree_obj_u.cancelSelectedNode();
					})
					.catch(function(error) {
						console.log(error);
						// sessionStorage.setItem('token','undefined')
						// that.$router.push('/login')
					});
			},
			// 获取科室
			getrooms() {
				var param = {
					parentId: 0
				}
				var that = this
				this.$http.post(this.$url + '/sys/dept/tree', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						
						that.zNodes = response.data.data
						that.ztree_obj = $.fn.zTree.init($("#treeDemo2"), that.setting, that.zNodes);
						var  nodes = that.ztree_obj.getNodes();
						for  ( var  i = 0; i < nodes.length; i++) {  //设置节点展开
						    that.ztree_obj.expandNode(nodes[i],  true ,  false ,  true );
						}
						that.zNodes_u = response.data.data
						that.ztree_obj_u = $.fn.zTree.init($("#treeDemo4"), that.setting_u, that.zNodes_u);
						 var  nodes = that.ztree_obj_u.getNodes();
						for  ( var  i = 0; i < nodes.length; i++) {  //设置节点展开
						    that.ztree_obj_u.expandNode(nodes[i],  true ,  false ,  true );
						}
					})
					.catch(function(error) {
						console.log(error);
						
						that.$Toast('网络拥堵，刷新一下');
					});
			
			},
			
			// 科室树状图选择
			choseroom(data, node, treeNode) {
				this.treeClickCount++;
				if (this.treeClickCount >= 2) {
					return;
				}
				this.timer = window.setTimeout(() => {
					if (this.treeClickCount == 1) {
						this.treeClickCount = 0;
						console.log('单击事件,可在此处理对应逻辑')
						
							this.did = treeNode.id
							this.getalluserlist()

					} else if (this.treeClickCount > 1) {
						this.treeClickCount = 0;
						console.log('双击事件,可在此处理对应逻辑')
					}
				}, 300);
			},
			changedate(ty) {
				if (this.createStartDate && this.createEndDate && this.createStartDate > this.createEndDate) {
					this.$Toast('选择的结束日期在开始日期之前');
					if (ty == 1) {
						this.createStartDate = ''
					} else {
						this.createEndDate = ''
					}
					
				}
				
				if (this.info.beginDate && this.info.endDate && this.info.beginDate > this.info.endDate) {
					this.$Toast('选择的结束日期在开始日期之前');
					if (ty == 1) {
						this.info.beginDate = ''
					} else {
						this.info.endDate = ''
					}
					
				}
			},
			changeall(){
				if(this.choseall){
					for (var i = 0; i < this.list.length; i++) {
						this.list[i].chosesf = true
					}
				}else{
					for (var i = 0; i < this.list.length; i++) {
						this.list[i].chosesf = false
					}
				}
			},
			chosechange(){
				for (var i = 0; i < this.list.length; i++) {
					if(this.list[i].chosesf == true){
						this.choseall=true
					}else{
						this.choseall=false
						break
					}
					
				}
			},
			search(){
				this.names = this.name
				this.suserids = this.suserid
				this.createStartDates = this.createStartDate
				this.createEndDates = this.createEndDate
				this.page = 1
				this.getlist()
			},
			
			closealert(){
				this.alert_show = false
			},
			delopen(id){
				var ids=''
				var num = 0
				if(id>0){
					num = 1
					this.ids = id
				}else{
					for (var i = 0; i < this.list.length; i++) {
						if(this.list[i].chosesf==true){
							ids = ids+''+this.list[i].id+','
							// this.ids.push(this.list[i].id)
							num++
						}
					}
					this.ids = ids.substring(0,ids.length-1)
					if(this.ids==''){
						this.$Toast('暂无选中');
						return
					}
				}
				
				this.delnum = num
				this.delalert=true		
			},
			// 删除
			del(){
				
				this.delalert=false
				var param = {
					ids:this.ids
				}
				var that = this
				this.$http.post(this.$url + '/xj/plan/delete', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
						that.page=1
						that.showinfo = false
						that.menushow = false
						that.getlist()
						
					})
					.catch(function(error) {
						console.log(error);
						that.$Toast('网络拥堵，刷新一下');
					});
			},

			openadd(){
				this.showadd=true
				this.info = {
					name:'',
					month:[1,2,3,4,5,6,7,8,9,10,11,12],
					day:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],
					week:[1,2,3,4,5,6,7]
				}
				this.day=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
				this.week = [1,2,3,4,5,6,7]
				this.dayf = true
				this.weekf = true
			},
			
			edit(index){
				this.showloading=true
				this.id = this.list[index].id
				
				var param = {
					id:this.id
				}
				var that = this
				this.$http.post(this.$url + '/xj/plan/selectOne', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.info ={
							id:response.data.data.id,
							name:response.data.data.name,
							beginDate:response.data.data.beginDate,
							endDate:response.data.data.endDate,
							day:response.data.data.day,
							week:response.data.data.week,
							month:response.data.data.month,
							time:response.data.data.time,
							isForever:response.data.data.isForever==1?true:false,
						} 
						if(response.data.data.day){
							that.xjzq = 1
						that.info.day = that.info.day.split(',')
						for (var i = 0; i < that.info.day.length; i++) {
							that.info.day[i] = parseInt(that.info.day[i])
						}
						}else if(response.data.data.week){
							that.xjzq = 2
							that.info.week = that.info.week.split(',')
						}else if(response.data.data.month){
							that.xjzq = 3
							that.info.month = that.info.month.split(',')
						}
						that.info.time = that.info.time.split(' ')
						that.info.time = that.info.time[2]+':'+that.info.time[1]+':'+that.info.time[0]
						console.log(that.info.time)
						that.week =  that.info.week
						that.day =  that.info.day
						that.user_c =  response.data.data.resId.split(',')
						that.cname = response.data.data.resRealName.split(',')
						that.cnames = response.data.data.resRealName
						that.tableData = response.data.data.list
				that.showadd = true
				that.showloading = false
						
					})
					.catch(function(error) {
						console.log(error);
						that.$Toast('网络拥堵，刷新一下');
					});
				
				
			},
			
			closeadd(){
				this.showadd = false;
				this.ppname =  ''
				this.remark =  ''
				this.id =  ''
			},
			
			 handleSizeChange(val) {
				this.limit = val
				this.choseall = false
				this.getlist()
			},
			handleCurrentChange(val) {
				this.page = val
				this.choseall = false
				this.getlist()
			},
			
			// 表单提交
			showData() {				
				if (this.info.name.trim() == '' || this.info.time == '' ||  this.cnames == '') {
					this.$Toast("请填写完整");
					return
				}
				console.log(this.info.isForever)
				console.log(this.info.beginDate)
				console.log(this.info.endDate)
				if (!this.info.isForever && (!this.info.beginDate||!this.info.endDate)) {
					this.$Toast("请填写完整");
					return
				}
				this.info.day = this.day
				this.info.week = this.week
				if (this.xjzq == 1 && this.info.day.length == 0) {
					this.$Toast("请填写完整");
					return
				}else if (this.xjzq == 2 && this.info.week.length == 0) {
					this.$Toast("请填写完整");
					return
				}else if (this.xjzq == 3 && this.info.month.length == 0) {
					this.$Toast("请填写完整");
					return
				}
				if (this.tableData.length == 0) {
					this.$Toast("请填写完整");
					return
				}
				console.log(this.info.time)
				this.info.time = this.info.time.split(':')
				var a = this.info.time[2]+' '+this.info.time[1]+' '+this.info.time[0]
				this.info.time = a
				if(this.xjzq == 1 ){
					if(this.info.day.length == 31){
						this.info.day = '1-31'
					}else{
						this.info.day = this.info.day.join(',')
					}
					
					this.info.week = '?'
					this.info.month = '*'
				}else if(this.xjzq == 2 ){
					if(this.info.week.length == 7){
						this.info.week = '1-7'
					}else{
						this.info.week = this.info.week.join(',')
					}
					
					this.info.day = '?'
					this.info.month = '*'
				}else if(this.xjzq == 3 ){
					this.info.month = this.info.month.join(',')
					this.info.day = '*'
					this.info.week = '?'
				}
				this.info.resId = this.user_c.join(',')
				this.info.isForever = this.info.isForever?1:0
				this.info.beginDate = this.info.beginDate?this.timeFormate2(this.info.beginDate):''
				this.info.endDate = this.info.endDate?this.timeFormate2(this.info.endDate):''
				this.info.xjUnit = []
				this.info.xjZc = []
				for (var i = 0; i < this.tableData.length; i++) {
					if(this.tableData[i].zcCode){
						this.info.xjZc.push(this.tableData[i].id)
					}else{
						this.info.xjUnit.push(this.tableData[i].id)
					}
				}
				this.info.xjZc = this.info.xjZc.join(',')
				this.info.xjUnit = this.info.xjUnit.join(',')
				
				var param = this.info
				this.showloading = true
				var that = this
				this.$http.post(this.$url + '/xj/plan/save', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
						that.showadd = false
						that.showloading = false
						that.info = {
							name:'',
							month:[],
							day:[],
							week:[]
						}
						that.week = []
						that.tableData = []
						that.user_c = []
						that.cname = []
						that.cnames = []
						that.xjzq = ''
						that.getlist()
					})
					.catch(function(error) {
						that.$Toast('网络拥堵，刷新一下');
					});
				
			},
			
			// 点击遮罩层
			close(){
				this.options_show=false
				this.showzzc=false
				this.showinfo=false
			},
			//显示当前时间（年月日时分秒）
			timeFormate(timeStamp) {
				let year = new Date(timeStamp).getFullYear();
				let month = new Date(timeStamp).getMonth() + 1 < 10 ? "0" + (new Date(timeStamp).getMonth() + 1) :
					new Date(timeStamp).getMonth() + 1;
				let date = new Date(timeStamp).getDate() < 10 ? "0" + new Date(timeStamp).getDate() : new Date(timeStamp)
					.getDate();
				let hh = new Date(timeStamp).getHours() < 10 ? "0" + new Date(timeStamp).getHours() : new Date(timeStamp)
					.getHours();
				let mm = new Date(timeStamp).getMinutes() < 10 ? "0" + new Date(timeStamp).getMinutes() : new Date(
					timeStamp).getMinutes();
				let ss = new Date(timeStamp).getSeconds() < 10 ? "0" + new Date(timeStamp).getSeconds() : new Date(
					timeStamp).getSeconds();
				let week = new Date(timeStamp).getDay();
				let weeks = ["日", "一", "二", "三", "四", "五", "六"];
				// + " " + " " + hh + ":" + mm + ':' + ss
				return year + "-" + month + "-" + date;
			},
			//显示当前时间（年月日时分秒）
			timeFormate2(timeStamp) {
				let year = new Date(timeStamp).getFullYear();
				let month = new Date(timeStamp).getMonth() + 1 < 10 ? "0" + (new Date(timeStamp).getMonth() + 1) :
					new Date(timeStamp).getMonth() + 1;
				let date = new Date(timeStamp).getDate() < 10 ? "0" + new Date(timeStamp).getDate() : new Date(timeStamp)
					.getDate();
				let hh = new Date(timeStamp).getHours() < 10 ? "0" + new Date(timeStamp).getHours() : new Date(timeStamp)
					.getHours();
				let mm = new Date(timeStamp).getMinutes() < 10 ? "0" + new Date(timeStamp).getMinutes() : new Date(
					timeStamp).getMinutes();
				let ss = new Date(timeStamp).getSeconds() < 10 ? "0" + new Date(timeStamp).getSeconds() : new Date(
					timeStamp).getSeconds();
				let week = new Date(timeStamp).getDay();
				let weeks = ["日", "一", "二", "三", "四", "五", "六"];
				// + " " + " " + hh + ":" + mm + ':' + ss
				return year + "-" + month + "-" + date + " " + hh + ":" + mm + ':' + ss;
			},
			getaddress() {
				this.showloading = true
				var that = this
				var param = {
					page:this.page3,
					limit:this.limit3,
					
				}
				this.$http.post(this.$url + '/xj/unit/select', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.xjaddress = response.data.data
						that.inglen3 = response.data.count
						console.log(that.addids)
						for (var i = 0; i < that.xjaddress.length; i++) {
							if(that.addids.indexOf(that.xjaddress[i].id) !=  -1){
								// that.$refs.multipleTable2.toggleRowSelection(that.xjaddress[i]);
							}
						}
						that.$forceUpdate()
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);
						// sessionStorage.setItem('token','undefined')
						// that.$router.push('/login')
						that.$Toast('网络拥堵，刷新一下');
					});
			
			},
			getxjzc() {
				this.showloading = true
				var that = this
				var param = {
					page:this.page4,
					limit:this.limit4,
					zcStatus: 0,
					isxj: 1
				}
				this.$http.post(this.$url + '/zc/selectList', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.xjzclist = response.data.data
						that.inglen4 = response.data.count
						// console.log(that.addids)
						// for (var i = 0; i < that.xjzclist.length; i++) {
						// 	if(that.addids.indexOf(that.xjzclist[i].id) !=  -1){
						// 		// that.$refs.multipleTable2.toggleRowSelection(that.xjaddress[i]);
						// 	}
						// }
						that.$forceUpdate()
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);
						// sessionStorage.setItem('token','undefined')
						// that.$router.push('/login')
						that.$Toast('网络拥堵，刷新一下');
					});
			
			},
			getlist() {
				this.showloading = true
				var that = this
				var param = {
					page:this.page,
					limit:this.limit,
					name:this.names,
					resId:this.suserids,
					beginSearch: this.createStartDates ? this.timeFormate(this.createStartDates) : '',
					endSearch: this.createEndDates ? this.timeFormate(this.createEndDates) + ' 23:59:59' : "",
				}
				this.$http.post(this.$url + '/xj/plan/select', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.list = response.data.data
						that.inglen = response.data.count
						for (var i = 0; i < that.list.length; i++) {
							that.list[i].chosesf = false
						}
						that.choseall = false
						that.$forceUpdate()
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);
						// sessionStorage.setItem('token','undefined')
						// that.$router.push('/login')
						that.$Toast('网络拥堵，刷新一下');
					});

			},
		},

		computed: {},
	}
</script>
<style lang='less' scoped>
	/deep/ .el-table th.el-table__cell>.cell{
		padding-left: 14px;
	}
	/deep/.days .el-checkbox:nth-of-type(1) {
		/* width: 130px !important; */
		margin-left: 90px;
	}

	/deep/.dat .el-checkbox:nth-of-type(1) {
		/* width: 130px !important; */
		margin-left: 80px;
	}

	/deep/ .plac .el-dialog {
		height: 780px;
		margin-top: calc(50vh - 380px) !important;
	}

	/deep/ .plac .el-dialog__body {
		height: 630px;
		overflow-y: auto;
	}

	/deep/ .plac .el-table .el-table__cell {
		padding: 6px 0;
	}

	.stitle {
		font-size: 16px;
		color: #333;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.days {
		display: flex;
		flex-wrap: wrap;
		width: 600px;
		margin-top: 20px;
	}

	.dayli {
		width: 35px;
		cursor: pointer;

	}


	.month .el-checkbox {
		width: 60px;
	}

	.dat .el-checkbox {
		width: 50px;
	}

	.alert_btns {
		margin-top: 20px;
	}

	.title {
		font-size: 24px;
		color: #000000;
	}

	.alert_info textarea {
		width: 100%;
		background: #FFFFFF;
		border: 1px solid #CCCCCC;
		box-shadow: 0px 2px 0px 0px #EEEEEE;
		border-radius: 5px;
		padding: 5px 10px;
		outline: none;
		margin-top: 10px;
		margin-bottom: -10px;
	}

	.input-cont:hover .clears {
		display: block;
	}

	.clears {
		width: 10px;
		position: absolute;
		right: 35px;
		top: 14px;
		display: none;
		cursor: pointer;
	}

	.sublia {
		display: flex;

	}

	.subli textarea {
		width: 336px;
		height: 100px;
		background: #FFFFFF;
		border: 1px solid #CCCCCC;
		box-shadow: 0px 2px 0px 0px #EEEEEE;
		border-radius: 5px;
		outline: none;
		padding: 10px 10px;
	}

	.subli /deep/ .el-date-editor--date .el-input__inner,
	.subli /deep/ .el-date-editor.el-input,
	.el-date-editor.el-input__inner {
		width: 336px !important;
	}

	.subli .adpl /deep/ .el-date-editor--date .el-input__inner,
	.subli .adpl /deep/ .el-date-editor.el-input,
	.el-date-editor.el-input__inner {
		width: 180px !important;
	}

	.subli .adpl {
		width: 40%;
		margin-right: 20px;
	}

	.subl {
		width: 100px;
		text-align: right;
		margin-right: 17px;
	}

	.subli /deep/ .el-input__prefix,
	.task_r /deep/ .el-input__prefix {
		right: 5px;
		left: auto;
		width: 25px;
	}

	.subli input,
	.subli .el-select {
		width: 336px !important;
		margin-left: 0;
	}

	.subli {
		display: flex;
		width: 100%;
		justify-content: flex-start !important;
		align-items: center;
	}

	.subli /deep/ .el-input__inner {
		height: 34px;
	}

	.subli label {
		margin-bottom: 0;
	}

	.sublist {
		padding-top: 15px;
	}

	.subli_left {
		display: flex;
		line-height: 34px;
		/* align-items: center; */

		/* width: 100%; */
		/* width: 50%; */
	}

	.subli {
		display: flex;
		/* align-items: center; */
		justify-content: space-between;
		color: #000;
		margin-bottom: 15px;
		justify-content: center;
	}

	/deep/ .el-pagination .btn-prev {
		border: 1px solid #ccc;
		padding: 0;
		border-right: none;
		min-width: 33px;
		height: 33px;
		padding-top: 2px;
	}

	/deep/ .el-pagination .btn-next {
		border: 1px solid #ccc;
		padding: 0;
		border-left: none;
		min-width: 33px;
		height: 33px;
		padding-top: 2px;
	}

	/deep/ .el-pager li {
		border: 1px solid #ccc;
		padding: 0;
		border-right: none;
		min-width: 33px;
		height: 33px;
		line-height: 33px;
	}

	/deep/ .el-pager li:nth-last-of-type(1) {
		border-right: 1px solid #ccc;
	}

	/deep/ .el-pager li.active {
		border: #4286f5 1px solid;
		background: #4286f5;
		color: #fff;
	}

	/deep/ .el-input--prefix .el-input__inner {
		height: 34px;
		padding: 0 8px;
	}

	/deep/ .el-date-editor--date .el-input__inner {
		width: 150px !important;
	}

	.search_box /deep/ .el-input__inner {
		width: 117px;
		height: 34px;
		/* background: #F6F6F6; */
		border: 1px solid #CCCCCC;
		/* box-shadow: 0px 2px 0px 0px #EEEEEE; */
		border-radius: 5px;

	}

	/deep/ .el-input__icon {
		line-height: 34px;
	}


	.el-select {
		margin-left: 10px;
	}

	.search_box {
		margin-bottom: 20px;
	}

	.search_box .el-select {
		margin-bottom: 20px;
	}

	.form-group .el-select {
		margin-left: 0px
	}

	.el-input__icon {
		line-height: 34px;
	}

	.el-input__inner {
		height: 34px;
		width: 110px;
		/* margin-left: 10px; */
	}

	.el-upload__input {
		bottom: 35px;
	}

	.btns {
		min-width: 72px;
		padding: 0 8px !important;
		width: auto !important;
	}

	.modal-lg .modal-body.h100 {
		height: calc(100vh - 130px);
	}

	.el-input--prefix .el-input__inner {
		padding-left: 12px;
		padding-right: 12px;
	}

	.search_inp {
		width: 260px;
		/* width: 160px; */
		margin-left: 10px;
		/* margin-bottom: 20px; */
	}

	.mb0,
	.mb0 .form-group {
		margin-bottom: 15px;
	}


	.btn-primary:hover {
		color: #fff !important;
		background: #4286f5 !important;
		border: none;
	}

	.btn-primary {
		outline: none !important;
		color: #fff !important;
		background: #4286f5 !important;
		margin-right: 18px;
	}

	.close_eng:hover {
		color: #434343 !important;
		background: #EEEEEE !important;
		border: none;
	}

	.close_eng {
		border: none;
		color: #434343 !important;
		background: #EEEEEE !important;
		outline: none !important;
	}

	.el-autocomplete {
		width: 271px;
	}

	.el-autocomplete-suggestion li.highlighted,
	.el-autocomplete-suggestion li:hover {
		background-color: #ddd;
	}

	.el-popper {
		margin-top: 0;
		margin-right: 0;
	}



	.my-autocomplete {
		border-radius: 0 0 6px 6px;
		min-width: 400px;
		margin-top: 0 !important;


		.popper__arrow {
			display: none;
		}

		.el-scrollbar__wrap {
			padding: 0 !important;
			overflow-x: scroll;

			li {
				padding: 0 !important;
				min-width: 320px;
			}

		}

	}


	.el-scrollbar__wrap {
		-ms-overflow-style: none !important;
	}

	.el-scrollbar__wrap::-webkit-scrollbar {
		display: none;
	}


	.container /deep/ tr td:nth-of-type(2) span {
		color: #22ac38;
	}

	.el-pagination__total {
		height: 33px !important;
		line-height: 33px !important;
	}

	.el-input--mini .el-input__inner {
		height: 33px;
	}

	.el-pagination__editor.el-input .el-input__inner {
		height: 33px;
	}

	.page_box {
		display: flex;
		justify-content: flex-end;
		margin-top: 30px;
	}

	.el-pagination .btn-prev {
		border: 1px solid #ccc;
		padding: 0;
		border-right: none;
		min-width: 33px;
		height: 33px;
		padding-top: 2px;
	}

	.el-pagination .btn-next {
		border: 1px solid #ccc;
		padding: 0;
		border-left: none;
		min-width: 33px;
		height: 33px;
		padding-top: 2px;
	}

	.el-pager li {
		border: 1px solid #ccc;
		padding: 0;
		border-right: none;
		min-width: 33px;
		height: 33px;
		line-height: 33px;
	}

	.el-pager li:nth-last-of-type(1) {
		border-right: 1px solid #ccc;
	}

	.el-pager li.active {
		border: #4286f5 1px solid;
		background: #4286f5;
		color: #fff;
	}

	.btns {
		width: 72px;
		padding: 0;
	}

	.zzc {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
	}


	.loading-content {
		position: absolute;
		z-index: 2000;
		/* background-color: rgba(0, 0, 0, 0.8); */
		margin: 0;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		transition: opacity 0.3s;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		/* width: 200px;
		height: 150px;
		border-radius: 10px; */
	}

	.loading-spinner {
		text-align: center;
	}

	.loading-spinner .circular {
		height: 42px;
		animation: loading-rotate 2s linear infinite;
	}

	.loading-spinner .path {
		animation: loading-dash 1.5s ease-in-out infinite;
		stroke-dasharray: 90, 150;
		stroke-dashoffset: 0;
		/* stroke- 2; */
		stroke: #000;
		stroke-linecap: round;
	}

	.loading-text {
		font-size: 14px;
		color: #000;
	}

	@keyframes loading-rotate {
		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes loading-dash {
		0% {
			stroke-dasharray: 1, 200;
			stroke-dashoffset: 0;
		}

		50% {
			stroke-dasharray: 90, 150;
			stroke-dashoffset: -40px;
		}

		to {
			stroke-dasharray: 90, 150;
			stroke-dashoffset: -120px;
		}
	}



	.btns .iconfont {
		font-size: 10px;
		transition: all .3s;
		transform: rotateZ(0deg);
		line-height: 26px;
	}



	td,
	th {
		font-size: 14px;
		color: #333;
		/* line-height: 22px; */
		padding: 10px;
		border-top: 0;
		border-bottom: 1px solid #eee;
	}



	.modal {
		position: absolute;
	}

	.modal-dialog {
		height: 97%;
	}

	.modal-header {
		position: sticky;
		top: 0;
		z-index: 50;
	}

	.modal-content {
		/* width: 85%; */
		margin: 0 auto;
		max-height: 100%;
		/* height: 65vh; */
		/* overflow-y: scroll; */
	}

	.cent {
		width: 100%;
		align-items: center;
	}
</style>
